{% extends 'base.html' %}

{% block css %}
    <link rel="stylesheet" href="static/assets/css/bootstrap-duallistbox.css" />
    <link rel="stylesheet" href="static/assets/css/bootstrap-multiselect.css" />
    <link rel="stylesheet" href="static/assets/css/select2.css" />
{% endblock %}

{% block titleinfo %}

    <div class="breadcrumbs ace-save-state" id="breadcrumbs">
        <ul class="breadcrumb">
            <i class="home-icon blue"> 资产管理 </i>
        </ul>
    </div>

{% endblock %}

{% block webinfo %}

        <div class="row">
            <div class="col-xs-12">
                <div class="table-header">
                    <a class="btn btn-primary" href="#" role="button" data-toggle="modal" data-target="#newAsset">
                        <i class="ace-icon fa fa-plus-circle bigger-110"></i>
                        新增资产库
                    </a>
                </div>

{#            新增插件模态框#}
                <div class="modal fade" id="newAsset" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                        aria-hidden="true">×
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    新增资产库
                                </h4>
                            </div>

                            <div class="modal-body" >
                                <form role="form" method="post" enctype=multipart/form-data>
                                    <div class="form-group">
                                        <label for="name"> 名称 </label>
                                        <input type="text" class="form-control" name="asset_name" id="asset_name" placeholder="请输入资产库名称">
                                    </div>

                                    <div class="form-group">
                                        <label for="name"> 资产列表 </label>
                                        <textarea class="form-control" rows="3" name="asset_text" placeholder="请输入资产列表，每行一个"></textarea>
                                    </div>

                                    <div class="form-group">
                                        <label for="name"> 所属部门 </label>
                                        <input type="text" class="form-control" name="dept_name" placeholder="请输入资产所属部分">
                                    </div>

                                    <div class="form-group">
                                        <label for="name"> 资产管理员 </label>
                                        <input type="text" class="form-control" name="admin_name" placeholder="请输入资产管理员">
                                    </div>

                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" value="true" name="scan_option" title="开启后，自动对资产列表进行端口扫描">启用资产服务发现功能
                                        </label>
                                    </div>

                                    <button type="submit" class="btn btn-primary">提交</button>
                                </form>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->
                {#            新增插件模态框结束#}

                <!-- div.dataTables_borderWrap -->
                <div>
                    <table id="dynamic-table" class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr class="center">
                                <th class="center">资产库编号</th>
                                <th class="center">名称</th>
                                <th class="center">所属部门</th>
                                <th class="center">管理员</th>
                                <th class="center">资产发现</th>
                                <th class="center">创建时间</th>
                                <th class="center">操作</th>
                            </tr>
                        </thead>

                        <tbody>
                            {% for i in asset_info %}
                                <tr class="center">
                                    <td>{{ i['_id'] }}</td>
                                    <td>
                                        <a class="blue asset_edit_id" role="button" data-toggle="modal" href="#" rel="{{ i['_id'] }}" title="编辑" data-target="#editAsset">{{ i['asset_name'] }}</a>
                                    </td>
                                    <td>{{ i['dept_name'] }}</td>
                                    <td>{{ i['admin_name'] }}</td>
                                    <td>{{ i['scan_option'] }}</td>
                                    <td>{{ i['asset_date'] }}</td>
                                    <td>
                                        <div class="hidden-sm hidden-xs action-buttons">
                                            <a class="blue asset_id_task" role="button" data-toggle="modal" href="#" rel="{{ i['_id'] }}" title="创建扫描任务" data-target="#newScan">
                                                <i class="ace-icon fa fa-bolt bigger-130"></i>
                                            </a>
                                            &nbsp;
                                            <a class="green asset_edit_id" role="button" data-toggle="modal" href="#" rel="{{ i['_id'] }}" title="编辑" data-target="#editAsset">
                                                <i class="ace-icon fa fa-pencil bigger-130"></i>
                                            </a>
                                            &nbsp;
                                            <a class="red" href="?delete={{ i['_id'] }}" title="删除">
                                                <i class="ace-icon fa fa-trash-o bigger-130"></i>
                                            </a>
                                        </div>

                                    </td>
                                </tr>
                            {% endfor %}

                            <div class="modal fade" id="newScan" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal"
                                                    aria-hidden="true">×
                                            </button>
                                            <h4 class="modal-title" id="myModalLabel">
                                                新增扫描任务
                                            </h4>
                                        </div>

                                        <div class="modal-body" >
                                            <form class="form-horizontal" role="form">

                                                <div class="form-group">
                                                    <label class="control-label no-padding-right">任务名称</label>

                                                    <div>
                                                      <input type="text" class="form-control" id="taskname" placeholder="请输入任务名称">
                                                    </div>
                                                </div>

                                                <div class="space-6"></div>

                                                <div class="form-group">
                                                    <label class="control-label no-padding-right">扫描周期</label>
                                                    <div>
                                                        <!-- #section:plugins/input.multiselect -->
                                                        <select class="form-control" id="form-field-plan">
                                                            <option value="0">单次扫描</option>
                                                            <option value="1">每日扫描</option>
                                                            <option value="7">每周扫描</option>
                                                            <option value="30">每月扫描</option>
                                                        </select>

                                                        <!-- /section:plugins/input.multiselect -->
                                                    </div>
                                                </div>

                                                <div class="hr hr-16 hr-dotted"></div>

                                                <div class="form-group">
                                                    <label class="control-label no-padding-right">扫描对象</label>
                                                    <div>
                                                        <input type="text" class="form-control" id="asset_id" disabled="disabled">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="control-label no-padding-right">插件选择</label>
                                                    <div>
                                                        <!-- #section:plugins/input.duallist -->

                                                        <select multiple="multiple" size="5" name="duallistbox_demo1[]" id="form-field-plugin">
                                                            {% for a in plugin_data %}
                                                                <option value="{{ a['_id'] }}">{{ a['plugin_name'] }}</option>
                                                            {% endfor %}
                                                            {# 从插件集合中读取数据，通过插件的ID来判断选择的插件#}
                                                        </select>

                                                        <!-- /section:plugins/input.duallist -->
                                                        <div class="hr hr-16 hr-dotted"></div>
                                                    </div>
                                                </div>

                                                <div class="form-group center">
                                                    <button type="button" class="btn btn-sm btn-default" id="createtask">
                                                        提交任务
                                                        <i class="ace-icon fa fa-arrow-right icon-on-right bigger-110" ></i>
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                            </div>
                            <div class="modal fade" id="editAsset" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal"
                                                    aria-hidden="true">×
                                            </button>
                                            <h4 class="modal-title" id="myModalLabel">
                                                资产库编辑
                                            </h4>
                                        </div>

                                        <div class="modal-body" >
                                            <form role="form" method="post" enctype=multipart/form-data>
                                                <div class="form-group">
                                                    <label for="name"> 名称 </label>
                                                    <input type="text" class="form-control" name="asset_name_edit" id="asset_name_edit" placeholder="请等待数据载入...">
                                                </div>

                                                <div class="form-group">
                                                    <label for="name"> 资产库ID </label>
                                                    <input type="text" class="form-control" id="asset_id_edit" disabled="disabled">
                                                </div>

                                                <div class="form-group">
                                                    <label for="name"> 资产列表 </label>
                                                    <textarea class="form-control" rows="3" id="asset_text_edit" placeholder="请等待数据载入..."></textarea>
                                                </div>

                                                <div class="form-group">
                                                    <label for="name"> 所属部门 </label>
                                                    <input type="text" class="form-control" id="dept_name_edit">
                                                </div>

                                                <div class="form-group">
                                                    <label for="name"> 资产管理员 </label>
                                                    <input type="text" class="form-control" id="admin_name_edit">
                                                </div>

                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" value="true" ID="scan_option_edit" title="开启后，自动对资产列表进行端口扫描">启用资产服务发现功能
                                                    </label>
                                                </div>

                                                <div class="form-group center">
                                                    <button type="button" class="btn btn-sm btn-default"  id="updateasset">
                                                        更新
                                                        <i class="ace-icon fa fa-arrow-right icon-on-right bigger-110" ></i>
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                            </div>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

{% block js %}

    <!-- page specific plugin scripts -->
    <script src="static/assets/js/dataTables/jquery.dataTables.js"></script>
    <script src="static/assets/js/dataTables/jquery.dataTables.bootstrap.js"></script>
    <!-- inline scripts related to this page -->
    <script type="text/javascript">
        $('#createtask').click(function () {
            taskname = $('#taskname').val();
            if (!taskname) {
                alert("任务名不可为空！");
            }
            plan = $('#form-field-plan').val();
            asset_id = $('#asset_id').val();
            plugin_text = $('#form-field-plugin').val().join(",");
            $.post('/add-task', {
                source: "asset",
                taskname: taskname,
                plan: plan,
                target_text: asset_id,
                plugin_text: plugin_text,
            }, function (e) {
                if (e === 'success') {
                    alert("建立成功");
                    location.href = "/task-management";
                } else {
                    alert("创建失败, 请检查数据是否完整或是否选择扫描对象!")
                }
            })
        });
        $(".asset_edit_id").click(function() {
                var asset_id = $(this).attr('rel');
                var data = {
                    "edit": asset_id,
                };
                $.ajax({
                    type: 'GET',
                    url: '/asset-management',
                    data: data,
                    dataType: 'json',
                    success: function(data) {
                        var data  = eval(data);
                        var asset_name = data.asset_name;
                        var dept_name = data.dept_name;
                        var admin_name = data.admin_name;
                        var asset_text = data.asset_text;
                        $('#asset_name_edit').val(asset_name);
                        $('#dept_name_edit').val(dept_name);
                        $('#admin_name_edit').val(admin_name);
                        $('#asset_text_edit').val(asset_text);
                        $('#asset_id_edit').val(asset_id);
                    },
                    error: function(xhr, type) {
                    }
                });
              });
        $('#updateasset').click(function () {
                asset_name = $('#asset_name_edit').val();
                if (!asset_name) {
                    alert("名称不可为空！");
                }
                dept_name = $('#dept_name_edit').val();
                admin_name = $('#admin_name_edit').val();
                asset_text = $('#asset_text_edit').val();
                asset_id = $('#asset_id_edit').val();
                var scan_option = $("input[type='checkbox']").is(':checked');
                $.post('/asset-edit', {
                    asset_name: asset_name,
                    dept_name: dept_name,
                    admin_name: admin_name,
                    asset_text: asset_text,
                    asset_id: asset_id,
                    scan_option: scan_option,
                }, function (response) {
                    if (response == 'success') {
                        alert("更新成功");
                        location.href = "/asset-management";
                    } else {
                        alert("更新失败");
                    }
                })
            });
        jQuery(function($){
            $(".asset_id_task").click(function() {
                var asset_id = $(this).attr('rel');
                $('#asset_id').val(asset_id);
              });
			    var demo1 = $('select[name="duallistbox_demo1[]"]').bootstrapDualListbox({infoTextFiltered: '<span class="label label-purple label-lg">Filtered</span>'});
				var container1 = demo1.bootstrapDualListbox('getContainer');
				container1.find('.btn').addClass('btn-white btn-info btn-bold');

				/**var setRatingColors = function() {
					$(this).find('.star-on-png,.star-half-png').addClass('orange2').removeClass('grey');
					$(this).find('.star-off-png').removeClass('orange2').addClass('grey');
				}*/
				$('.rating').raty({
					'cancel' : true,
					'half': true,
					'starType' : 'i'
					/**,

					'click': function() {
						setRatingColors.call(this);
					},
					'mouseover': function() {
						setRatingColors.call(this);
					},
					'mouseout': function() {
						setRatingColors.call(this);
					}*/
				})//.find('i:not(.star-raty)').addClass('grey');



				//////////////////
				//select2
				$('.select2').css('width','200px').select2({allowClear:true})
				$('#select2-multiple-style .btn').on('click', function(e){
					var target = $(this).find('input[type=radio]');
					var which = parseInt(target.val());
					if(which == 2) $('.select2').addClass('tag-input-style');
					 else $('.select2').removeClass('tag-input-style');
				});

				//////////////////
				$('.multiselect').multiselect({
				 enableFiltering: true,
				 enableHTML: true,
				 buttonClass: 'btn btn-white btn-primary',
				 templates: {
					button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> &nbsp;<b class="fa fa-caret-down"></b></button>',
					ul: '<ul class="multiselect-container dropdown-menu"></ul>',
					filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="fa fa-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
					filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default btn-white btn-grey multiselect-clear-filter" type="button"><i class="fa fa-times-circle red2"></i></button></span>',
					li: '<li><a tabindex="0"><label></label></a></li>',
			        divider: '<li class="multiselect-item divider"></li>',
			        liGroup: '<li class="multiselect-item multiselect-group"><label></label></li>'
				 }
				});


				///////////////////

				//typeahead.js
				//example taken from plugin's page at: https://twitter.github.io/typeahead.js/examples/
				var substringMatcher = function(strs) {
					return function findMatches(q, cb) {
						var matches, substringRegex;

						// an array that will be populated with substring matches
						matches = [];

						// regex used to determine if a string contains the substring `q`
						substrRegex = new RegExp(q, 'i');

						// iterate through the pool of strings and for any string that
						// contains the substring `q`, add it to the `matches` array
						$.each(strs, function(i, str) {
							if (substrRegex.test(str)) {
								// the typeahead jQuery plugin expects suggestions to a
								// JavaScript object, refer to typeahead docs for more info
								matches.push({ value: str });
							}
						});

						cb(matches);
					}
				 }

				 $('input.typeahead').typeahead({
					hint: true,
					highlight: true,
					minLength: 1
				 }, {
					name: 'states',
					displayKey: 'value',
					source: substringMatcher(ace.vars['US_STATES']),
					limit: 10
				 });


				///////////////


				//in ajax mode, remove remaining elements before leaving page
				$(document).one('ajaxloadstart.page', function(e) {
					$('[class*=select2]').remove();
					$('select[name="duallistbox_demo1[]"]').bootstrapDualListbox('destroy');
					$('.rating').raty('destroy');
					$('.multiselect').multiselect('destroy');
				});

			});
        jQuery(function($) {
            //initiate dataTables plugin
            var myTable =
            $('#dynamic-table')
            //.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
            .DataTable( {
                bAutoWidth: false,
                "aoColumns": [
                  { "bSortable": false },
                  null, null,null, null, null,
                  { "bSortable": false }
                ],
                "aaSorting": [],


                //"bProcessing": true,
                //"bServerSide": true,
                //"sAjaxSource": "http://127.0.0.1/table.php"	,

                //,
                //"sScrollY": "200px",
                //"bPaginate": false,

                //"sScrollX": "100%",
                //"sScrollXInner": "120%",
                //"bScrollCollapse": true,
                //Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
                //you may want to wrap the table inside a "div.dataTables_borderWrap" element

                //"iDisplayLength": 50


                select: {
                    style: 'multi'
                }
            } );



            $.fn.dataTable.Buttons.swfPath = "static/assets/js/dataTables/extensions/Buttons/swf/flashExport.swf"; //in Ace demo static/assets will be replaced by correct assets path
            $.fn.dataTable.Buttons.defaults.dom.container.className = 'dt-buttons btn-overlap btn-group btn-overlap';

            new $.fn.dataTable.Buttons( myTable, {
                buttons: [
                  {
                    "extend": "colvis",
                    "text": "<i class='fa fa-search bigger-110 blue'></i> <span class='hidden'>Show/hide columns</span>",
                    "className": "btn btn-white btn-primary btn-bold",
                    columns: ':not(:first):not(:last)'
                  },
                  {
                    "extend": "copy",
                    "text": "<i class='fa fa-copy bigger-110 pink'></i> <span class='hidden'>Copy to clipboard</span>",
                    "className": "btn btn-white btn-primary btn-bold"
                  },
                  {
                    "extend": "csv",
                    "text": "<i class='fa fa-database bigger-110 orange'></i> <span class='hidden'>Export to CSV</span>",
                    "className": "btn btn-white btn-primary btn-bold"
                  },
                  {
                    "extend": "excel",
                    "text": "<i class='fa fa-file-excel-o bigger-110 green'></i> <span class='hidden'>Export to Excel</span>",
                    "className": "btn btn-white btn-primary btn-bold"
                  },
                  {
                    "extend": "pdf",
                    "text": "<i class='fa fa-file-pdf-o bigger-110 red'></i> <span class='hidden'>Export to PDF</span>",
                    "className": "btn btn-white btn-primary btn-bold"
                  },
                  {
                    "extend": "print",
                    "text": "<i class='fa fa-print bigger-110 grey'></i> <span class='hidden'>Print</span>",
                    "className": "btn btn-white btn-primary btn-bold",
                    autoPrint: false,
                    message: 'This print was produced using the Print button for DataTables'
                  }
                ]
            } );
            myTable.buttons().container().appendTo( $('.tableTools-container') );

            //style the message box
            var defaultCopyAction = myTable.button(1).action();
            myTable.button(1).action(function (e, dt, button, config) {
                defaultCopyAction(e, dt, button, config);
                $('.dt-button-info').addClass('gritter-item-wrapper gritter-info gritter-center white');
            });


            var defaultColvisAction = myTable.button(0).action();
            myTable.button(0).action(function (e, dt, button, config) {

                defaultColvisAction(e, dt, button, config);


                if($('.dt-button-collection > .dropdown-menu').length == 0) {
                    $('.dt-button-collection')
                    .wrapInner('<ul class="dropdown-menu dropdown-light dropdown-caret dropdown-caret" />')
                    .find('a').attr('href', '#').wrap("<li />")
                }
                $('.dt-button-collection').appendTo('.tableTools-container .dt-buttons')
            });

            ////

            setTimeout(function() {
                $($('.tableTools-container')).find('a.dt-button').each(function() {
                    var div = $(this).find(' > div').first();
                    if(div.length == 1) div.tooltip({container: 'body', title: div.parent().text()});
                    else $(this).tooltip({container: 'body', title: $(this).text()});
                });
            }, 500);





            myTable.on( 'select', function ( e, dt, type, index ) {
                if ( type === 'row' ) {
                    $( myTable.row( index ).node() ).find('input:checkbox').prop('checked', true);
                }
            } );
            myTable.on( 'deselect', function ( e, dt, type, index ) {
                if ( type === 'row' ) {
                    $( myTable.row( index ).node() ).find('input:checkbox').prop('checked', false);
                }
            } );




            /////////////////////////////////
            //table checkboxes
            $('th input[type=checkbox], td input[type=checkbox]').prop('checked', false);

            //select/deselect all rows according to table header checkbox
            $('#dynamic-table > thead > tr > th input[type=checkbox], #dynamic-table_wrapper input[type=checkbox]').eq(0).on('click', function(){
                var th_checked = this.checked;//checkbox inside "TH" table header

                $('#dynamic-table').find('tbody > tr').each(function(){
                    var row = this;
                    if(th_checked) myTable.row(row).select();
                    else  myTable.row(row).deselect();
                });
            });

            //select/deselect a row when the checkbox is checked/unchecked
            $('#dynamic-table').on('click', 'td input[type=checkbox]' , function(){
                var row = $(this).closest('tr').get(0);
                if(!this.checked) myTable.row(row).deselect();
                else myTable.row(row).select();
            });



            $(document).on('click', '#dynamic-table .dropdown-toggle', function(e) {
                e.stopImmediatePropagation();
                e.stopPropagation();
                e.preventDefault();
            });



            //And for the first simple table, which doesn't have TableTools or dataTables
            //select/deselect all rows according to table header checkbox
            var active_class = 'active';
            $('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
                var th_checked = this.checked;//checkbox inside "TH" table header

                $(this).closest('table').find('tbody > tr').each(function(){
                    var row = this;
                    if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
                    else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
                });
            });

            //select/deselect a row when the checkbox is checked/unchecked
            $('#simple-table').on('click', 'td input[type=checkbox]' , function(){
                var $row = $(this).closest('tr');
                if($row.is('.detail-row ')) return;
                if(this.checked) $row.addClass(active_class);
                else $row.removeClass(active_class);
            });



            /********************************/
            //add tooltip for small view action buttons in dropdown menu
            $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});

            //tooltip placement on right or left
            function tooltip_placement(context, source) {
                var $source = $(source);
                var $parent = $source.closest('table')
                var off1 = $parent.offset();
                var w1 = $parent.width();

                var off2 = $source.offset();
                //var w2 = $source.width();

                if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
                return 'left';
            }




            /***************/
            $('.show-details-btn').on('click', function(e) {
                e.preventDefault();
                $(this).closest('tr').next().toggleClass('open');
                $(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-down').toggleClass('fa-angle-double-up');
            });
            /***************/





            /**
            //add horizontal scrollbars to a simple table
            $('#simple-table').css({'width':'2000px', 'max-width': 'none'}).wrap('<div style="width: 1000px;" />').parent().ace_scroll(
              {
                horizontal: true,
                styleClass: 'scroll-top scroll-dark scroll-visible',//show the scrollbars on top(default is bottom)
                size: 2000,
                mouseWheelLock: true
              }
            ).css('padding-top', '12px');
            */


        })
    </script>
    <script src="static/assets/js/jquery.bootstrap-duallistbox.js"></script>
    <script src="static/assets/js/jquery.bootstrap-duallistbox.js"></script>
    <script src="static/assets/js/jquery.raty.js"></script>
    <script src="static/assets/js/bootstrap-multiselect.js"></script>
    <script src="static/assets/js/select2.js"></script>
    <script src="static/assets/js/typeahead.jquery.js"></script>

{% endblock %}

{% endblock %}